<template>
	<view>
		<view class="header">
			<u-navbar
				:background="{ backgroundColor: '#3478F2' }"
				back-icon-color="#fff"
				back-icon-name="arrow-left"
				back-icon-size="40"
				title="基本信息"
				title-color="#fff"
				title-size="40"
				title-bold
			></u-navbar>
		</view>
		<scroll-view scroll-top="0" scroll-y="true" :style="`height:${scrollHeight}px`">
			<view class="page">
				<view class="tips">完成该项信息填写后，最快10分钟下款成功</view>
				<view class="content">
					<view class="home">
						<view class="title">
							<view class="xing">*</view>
							<view class="title_dec">家庭信息</view>
						</view>
						<u-cell-group :border="false">
							<u-cell-item
								title="现居住地址"
								hover-class="none"
								@click="showCity = true"
								:valueStyle="{ color: form.cityName == '' ? '#909399' : '#333333' }"
								:value="form.cityName || '请选择'"
							></u-cell-item>
						</u-cell-group>
					</view>
					<view class="home" style="margin-top: 40rpx">
						<view class="title">
							<text class="xing">*</text>
							<view class="title_dec">职业信息</view>
						</view>
						<u-cell-group :border="false">
							<u-cell-item
								title="职业身份"
								hover-class="none"
								@click="showOccupation = true"
								:valueStyle="{ color: form.occupation == '' ? '#909399' : '#333333' }"
								:value="form.occupation.label || '请选择'"
							></u-cell-item>
						</u-cell-group>
					</view>
					<template v-if="form.occupation.value == 1 || form.occupation.value == 2">
						<itemInput label="月收入" maxlength="5" placeholder="请输入0~50000的金额" unit="元/月" @input="onInput" />
						<view class="input_box u-border-bottom">
							<view class="input_box_title">工龄</view>
							<view class="input_box_val">
								<text v-for="(item, index) in workingData" :key="index" @click="handleItem(index, 'workingData')" :class="{ active: item.falg }">
									{{ item.label }}
								</text>
							</view>
						</view>
						<view class="input_box u-border-bottom">
							<view class="input_box_title">工资发放形式</view>
							<view class="input_box_val">
								<text v-for="(item, index) in block" :key="index" @click="handleItem(index, 'block')" :class="{ active: item.falg }">{{ item.label }}</text>
							</view>
						</view>
					</template>
					<template v-if="form.occupation.value == 3">
						<itemInput label="总经营流水" :key="form.occupation.value" maxlength="5" placeholder="请输入" unit="万元/月" @input="onInput" />
						<itemInput label="对公账户经营收入" :key="form.occupation.value + 1" maxlength="5" placeholder="请输入" unit="万元/月" @input="onInput2" />
						<view class="input_box_line u-border-bottom">
							<view class="input_box_title">营业执照注册年限</view>
							<view class="input_box_val">
								<text v-for="(item, index) in permit" :key="index" :class="{ active: item.falg }" @click="handleItem(index, 'permit')">{{ item.label }}</text>
							</view>
						</view>
					</template>
					<template v-if="form.occupation.value == 4">
						<itemInput label="总经营流水" :key="form.occupation.value" maxlength="5" placeholder="请输入" unit="万元/月" @input="onInput" />
						<view class="input_box_line u-border-bottom">
							<view class="input_box_title">营业执照注册年限</view>
							<view class="input_box_val">
								<text v-for="(item, index) in permit" :key="index" :class="{ active: item.falg }" @click="handleItem(index, 'permit')">{{ item.label }}</text>
							</view>
						</view>
					</template>
					<template v-if="form.occupation.value == 5">
						<itemInput label="月收入" @input="onInput" :key="form.occupation.value" placeholder="请输入0~50000的金额" unit="元/月" />
					</template>
					<template v-if="form.occupation.value == 6">
						<itemInput label="月收入" @input="onInput" :key="form.occupation.value" placeholder="请输入0~50000的金额" unit="元/月" />
					</template>
				</view>
				<view class="pd">
					<view class="btn headle" @click="sub">提交</view>

					<view class="tips1">
						<image src="/static/icon/dun-pai@3x.png" mode="scaleToFill" />
						<text>国家级数据加密保护，仅用于贷款审核</text>
					</view>
				</view>
				<u-select v-model="showCity" mode="mutil-column-auto" :list="cityList" @confirm="confirm" title="您的现居地址"></u-select>
				<u-select v-model="showOccupation" mode="mutil-column-auto" :list="occupationDate" @confirm="handleOccupationConfirm" title="请选择您的职业"></u-select>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import city from '@/utils/city.json'
import itemInput from '@/pages/auth/components/item-input.vue'
import { mixin } from '@/utils/mixins'
export default {
	mixins: [mixin],
	components: {
		itemInput
	},
	data() {
		return {
			workingData: [
				{ value: '1', label: '0-6个月', falg: false },
				{ value: '2', label: '6-12个月', falg: false },
				{ value: '3', label: '12个月以上', falg: false }
			],
			working: false,
			block: [
				{ label: '银行卡', value: 1, falg: false },
				{ label: '现金', value: 2, falg: false },
				{ label: '自存', value: 3, falg: false }
			],
			permit: [
				{ label: '未注册', value: 1, falg: false },
				{ label: '注册1年以下', value: 2, falg: false },
				{ label: '注册1~5年', value: 3, falg: false },
				{ label: '注册5年以上', value: 4, falg: false }
			],
			showCity: false,
			showOccupation: false,
			cityList: city,
			form: {
				income: '',
				income_g: '',
				cityName: '', //所在城市
				occupation: '' //职业
			},
			occupationDate: [
				{
					value: '1',
					label: '上班族'
				},
				{
					value: '2',
					label: '公务员'
				},
				{
					value: '3',
					label: '企业主'
				},
				{
					value: '4',
					label: '个体户'
				},
				{
					value: '5',
					label: '自由职业'
				},
				{
					value: '6',
					label: '其他'
				}
			]
		}
	},
	computed: {
		isActive() {
			let bool = false
			let data = JSON.parse(JSON.stringify(this.form))
			delete data.income_g
			delete data.income
			let key = Object.values(data)
			if (!key.includes('')) {
				if (this.form.occupation.value == 1 || this.form.occupation.value == 2) {
					let data = this.block.filter((item) => item.falg == true)
					let data2 = this.workingData.filter((item) => item.falg == true)
					if (data.length && data2.length && this.form.income != '') {
						bool = true
					}
				}
				if (this.form.occupation.value == 3 || this.form.occupation.value == 4) {
					let data = this.permit.filter((item) => item.falg == true)
					if (this.form.occupation.value == 3 && this.form.income_g != '' && data.length && this.form.income != '') {
						bool = true
					}
					if (this.form.occupation.value == 4 && this.form.income != '') {
						bool = true
					}
				}
				if (this.form.occupation.value == 5 || (this.form.occupation.value == 6 && this.form.income != '')) {
					bool = true
				}
			}
			return bool
		}
	},
	methods: {
		confirm(item) {
			this.form.cityName = `${item[0].label}-${item[1].label}`
		},
		handleItem(index, name) {
			this[name].forEach((item) => (item.falg = false))
			this[name][index].falg = true
		},
		onInput(item) {
			this.form.income = item
		},
		onInput2(item) {
			this.form.income_g = item
		},
		handleOccupationConfirm(item) {
			this.block.forEach((item) => (item.falg = false))
			this.permit.forEach((item) => (item.falg = false))
			this.form.occupation = item[0]
		},
		sub() {
			let params = {
				city: this.form.cityName,
				vocation: this.form.occupation.value,
				money: this.money,
				income: this.form.income
			}
			if (this.form.cityName == '') {
				uni.showToast({
					title: '请选择城市',
					icon: 'none'
				})
				return
			}
			if (this.form.occupation == '') {
				uni.showToast({
					title: '请选职业',
					icon: 'none'
				})
				return
			}
			if (this.form.income == '') {
				const txt = this.form.occupation.value == 3 || this.form.occupation.value == 4 ? '请输入总经营流水' : '请输入收入信息'
				uni.showToast({
					title: txt,
					icon: 'none'
				})
				return
			}
			if (this.form.occupation.value == 1 || this.form.occupation.value == 2) {
				let data = this.block.filter((item) => item.falg == true)
				let data2 = this.workingData.filter((item) => item.falg == true)
				if (!data.length) {
					uni.showToast({
						title: '请选择工资发放形式',
						icon: 'none'
					})
					return
				}
				if (!data2.length) {
					uni.showToast({
						title: '请选择工龄',
						icon: 'none'
					})
					return
				}
				params.wages = data[0].value
				params.working = data2[0].value
			}
			if (this.form.occupation.value == 3 && this.form.income_g == '') {
				uni.showToast({
					title: '请输入对公账户经营收入',
					icon: 'none'
				})
				return
			}
			if (this.form.occupation.value == 3) {
				params.income_g = this.form.income_g
			}
			if (this.form.occupation.value == 3 || this.form.occupation.value == 4) {
				// permit
				let data = this.permit.filter((item) => item.falg == true)
				if (!data.length) {
					uni.showToast({
						title: '请选择营业执照注册年限',
						icon: 'none'
					})
					return
				}
				params.business = data[0].value
			}

			uni.navigateTo({
				url: '/pages/financial/urgency'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	background: #fff;
	height: 100%;
	position: relative;
}
::v-deep .u-cell {
	padding: 13px;
}
.pd {
	position: absolute;
	width: 100vw;
	padding: 0 32rpx;
	bottom: 200rpx;
}
.btn {
	height: 92rpx;
	background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
	line-height: 92rpx;
	text-align: center;
	border-radius: 70rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
}
.tips1 {
	margin-top: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #bdbdbd;
	image {
		width: 24rpx;
		height: 28rpx;
		margin-right: 12rpx;
	}
}
.tips {
	width: 100vw;
	height: 64rpx;
	background: #e4eeff;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3478f2;
	text-align: center;
	line-height: 64rpx;
}
.home {
	box-sizing: border-box;
	padding: 0 32rpx;
}
.title {
	align-items: center;
	display: flex;
	font-family: PingFang SC;
	margin-top: 16rpx;
	.xing {
		width: 18rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #fc1f1f;
		margin-left: 6rpx;
	}
	.title_dec {
		width: 144rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
}
.input_box_line {
	padding: 32rpx 0;
	font-size: 28rpx;
	padding-left: 16px !important;
	padding-right: 32rpx;
	color: #606266;
	.input_box_val {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #ffffff;
			border: 1rpx solid #bdbdbd;
			border-radius: 36rpx;
			text-align: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #bdbdbd;
		}
	}
}
.input_box .input_box_val text.active,
.input_box_line .input_box_val text.active {
	background: #eef4fe;
	border: 2rpx solid #3478f2;
	color: #3478f2;
}
.input_box {
	display: flex;
	align-items: center;
	padding: 32rpx 0;
	font-size: 28rpx;
	padding-left: 28rpx;
	padding-right: 32rpx;
	color: #606266;
	.input_box_title {
		font-family: PingFang SC;
		font-weight: 400;
		width: 55%;
	}
	.input_box_val {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 800rpx;
		text {
			width: 136rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #ffffff;
			border: 1rpx solid #bdbdbd;
			border-radius: 36rpx;
			text-align: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #bdbdbd;
		}
	}
}
</style>
